<template>
  <div class="entry_sound" :id="listData.id">
    <div :class="['list_text_box', { entry: !entry }]">
      <div class="list_text_title">
        <span class="text">{{ listData.title }}</span>
      </div>
      <div class="list_text_input">
        <div v-html="removeHtmlStyle(listData.entryCont) || '无'" class="entry_cont"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'EntrySound',
  components: {},
  props: {
    listData: {
      type: Object,
      default: () => {
        return {
          title: '标题',
          entryCont: '输入内容',
          audioList: [],
        }
      },
    },
    entry: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {}
  },
  computed: {
    ...mapState(['isPc']),
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
  },
}
</script>

<style lang="scss" scoped>
.entry_sound {
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;

  .list_text_box {
    display: flex;
    width: 100%;
    &.entry {
      flex-direction: column;

      .list_text_title {
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
      }
    }
    // 标题
    .list_text_title {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      padding-top: 10px;
      width: 130px;
      text-align: right;
      padding-right: 10px;
    }
    .list_text_input {
      width: 100%;
      word-break: break-all;
      .tribute {
        word-break: break-all;
      }
      .content-editable:empty:before {
        color: #dac5c5;
      }
    }

    .entry_cont {
      font-size: 14px;
      line-height: 26px;
      color: #666666;
      width: 100%;
      padding: 15px;
      background-color: #e9eff48f;
      white-space: pre-wrap;
    }
  }
}
</style>
